"use client";
import {Card, Tag} from "antd";
import Title from "antd/es/typography/Title";
import TagList from "@/components/TagList";
import MdViewer from "@/components/MdViewer";
import useAddUserSignInRecord from "@/hooks/useAddUserSignInRecord";
import "./index.css";
import {EyeOutlined, LikeFilled, LikeOutlined, StarFilled, StarOutlined} from "@ant-design/icons";
import React, {useState} from "react";
import {doFavorUsingPost, doThumbUsingPost} from "@/api/questionController";

interface Props {
    question: API.QuestionVO;
}

/**
 * 题目卡片
 * @param props
 * @constructor
 */
const QuestionCard = (props: Props) => {
    const {question} = props;

    // 签到
    useAddUserSignInRecord();

    // 定义难度颜色映射
    const difficultyColors = {
        简单: {backgroundColor: '#52c41a', color: '#fff'}, // 绿色背景，白色字体
        中等: {backgroundColor: '#fed73b', color: '#fff'}, // 黄色背景，白色字体
        困难: {backgroundColor: '#ff4d4f', color: '#fff'}  // 红色背景，白色字体
    };

    // 获取难度颜色
    const difficultyStyle = difficultyColors[question.diff] || {backgroundColor: '#ccc', color: '#000'};


    // 状态管理点赞和收藏数量
    const [thumbNum, setThumbNum] = useState(Number(question.thumbNum) || 0);
    const [favourNum, setFavourNum] = useState(Number(question.favorNum) || 0);

    // 状态管理点赞和收藏是否被点击
    const [isLiked, setIsLiked] = useState(Boolean(question.isThumb));
    const [isFavourited, setIsFavourited] = useState(Boolean(question.isFavor));

    // 模拟点赞操作
    const handleLike = async () => {
        if (isLiked) {
            // 取消点赞
            try {
                const res = await doThumbUsingPost({
                    questionId: question.id,
                });
                if (res.data == true) {
                    setThumbNum(prevThumbNum => prevThumbNum - 1);
                } else {
                    console.error('Failed to cancel like');
                }
            } catch (error) {
                console.error('Error cancelling like:', error);
            }
        } else {
            // 点赞
            try {
                const res = await doThumbUsingPost({
                    questionId: question.id,
                });
                if (res.data == true) {
                    setThumbNum(prevThumbNum => prevThumbNum + 1);
                } else {
                    console.error('Failed to like');
                }
            } catch (error) {
                console.error('Error liking:', error);
            }
        }
        setIsLiked(!isLiked);
    };

    // 模拟收藏操作
    const handleFavour = async () => {
        if (isFavourited) {
            // 取消收藏
            try {
                const res = await doFavorUsingPost({
                    questionId: question.id,
                });
                if (res.data == true) {
                    setFavourNum(prevFavourNum => prevFavourNum - 1);
                } else {
                    console.error('Failed to cancel favour');
                }
            } catch (error) {
                console.error('Error cancelling favour:', error);
            }
        } else {
            // 收藏
            try {
                const res = await doFavorUsingPost({
                    questionId: question.id,
                });
                if (res.data == true) {
                    setFavourNum(prevFavourNum => prevFavourNum + 1);
                } else {
                    console.error('Failed to favour');
                }
            } catch (error) {
                console.error('Error favouring:', error);
            }
        }
        setIsFavourited(!isFavourited);
    };

    return (
        <div className="question-card">
            <Card>
                <Title level={1} style={{fontSize: 24, position: 'relative'}}>
                    {question.id + ". "}
                    {question.title}
                    {question.isVip ? (
                        <Tag color="gold" style={{
                            position: 'absolute',
                            top: 0,
                            right: 0,
                            fontSize: 14,
                            transform: 'translate(50%, -50%)'
                        }}>
                            VIP
                        </Tag>
                    ):(
                        <Tag color="green" style={{
                            position: 'absolute',
                            top: 0,
                            right: 0,
                            fontSize: 14,
                            transform: 'translate(50%, -50%)'
                        }}>
                            免费
                        </Tag>
                    )}
                </Title>
                <div className="question-details">
                    <span className="difficulty" style={{
                        marginRight: 12,
                        fontSize: 14,
                        fontWeight: 'bold',
                        backgroundColor: difficultyStyle.backgroundColor,
                        color: difficultyStyle.color,
                        padding: '2px 6px',
                        borderRadius: 4
                    }}>
                        {question.diff}
                    </span>
                    <TagList tagList={question.tagList}/>
                </div>
                <div style={{marginBottom: 16}}/>
                {/*<MdViewer value={question.content}/>*/}
                <div className="question-actions">
                    <span className="action-item" onClick={handleLike}>
                        {isLiked ? <LikeFilled style={{marginRight: 4, color: '#ffcc00', cursor: 'pointer'}}/> :
                            <LikeOutlined style={{marginRight: 4, cursor: 'pointer'}}/>}
                        {thumbNum}
                    </span>
                    <span className="action-item" onClick={handleFavour}>
                        {isFavourited ? <StarFilled style={{marginRight: 4, color: '#ffcc00', cursor: 'pointer'}}/> :
                            <StarOutlined style={{marginRight: 4, cursor: 'pointer'}}/>}
                        {favourNum}
                    </span>
                    <span className="action-item">
                        <EyeOutlined style={{marginRight: 4}}/>
                        {question.seeNum}
                    </span>
                </div>
            </Card>
            <div style={{marginBottom: 16}}/>
            <Card title="推荐答案">
                <MdViewer value={question.answer}/>
            </Card>
        </div>
    );
};

export default QuestionCard;
